
<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card">
        <el-form>
          <el-form-item>
            <el-button type="success" icon="el-icon-search" size="mini">状态</el-button>
            <el-button type="primary" icon="el-icon-search" size="mini">清空</el-button>
          </el-form-item>
        </el-form>
        <el-row ref="log" :gutter="10" class="mb8">
          <el-scrollbar style="height:500px;background-color: black;color: cornflowerblue;">
            <ul
              style="line-height: 25px;padding-top: 15px;padding-bottom: 15px;min-height: 500px; margin: 0;list-style-type: none;"
            >
              <li v-for="(item,index) in arrs" :key="index">

                {{ item }}
              </li>
            </ul>
          </el-scrollbar>
        </el-row>
      </el-card>
    </template>
  </BasicLayout>

</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      websock: null,
      arrs: []
    }
  },
  created() {
    this.initWebSocket()
  },
  destroyed() {
    this.websock.close() // 离开路由之后断开websocket连接
  },
  methods: {
    initWebSocket() { // 初始化weosocket
      console.log(this.$store.state.user.token)
      const wsuri = 'ws://127.0.0.1:8000/ws?token=oooooooo'
      this.websock = new WebSocket(wsuri, ['aaaaaaaaaaaaaaaaaaaaaaa'])
      //   this.websock.on('headers', headers => {
      //     headers.push('Authorization:Bearer sssss')
      //   })
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() { // 连接建立之后执行send方法发送数据
      console.log('连接打开')
    //   const actions = { 'test': '12345' }
    //   this.websocketsend(JSON.stringify(actions))
    },
    websocketonerror() { // 连接建立失败重连
      this.initWebSocket()
    },
    websocketonmessage(e) { // 数据接收
      console.log(e.data)
      //   console.log(this.binaryAgent(e))
      //   const redata = JSON.parse(e.data)
      //   console.log(redata)
      //   this.$refs.log.innerText = e.data + '\n' + this.$refs.log.innerText
      this.arrs.unshift(e.data)
    },
    websocketsend(Data) { // 数据发送
    //   this.websock.send(Data)
    },
    websocketclose(e) { // 关闭
      console.log('断开连接', e)
    }
  }
}

</script>
